import 'kendoUiStyles/kendo.common.min.css'
import 'kendoUiStyles/kendo.bootstrap.min.css'
import kendoDropDownList from 'kendoUi/kendo.dropdownlist.min'
import $ from 'jquery'
import kendoDataSource from "./kendoDataSource"

function init(option) {
  let el = option.el;

  let dropDownList = option.dataSource.url ? initWithDataSource(option) : initWithDataObject(option);

  dropDownList.data("kendoDropDownList").value(option.value);
}

function initWithDataSource({dataSource, el, onValueChanged}) {

  let kendoDropDownListOption = {
    dataTextField: dataSource.dataTextField,
    dataValueField: dataSource.dataValueField,
    optionLabel: "---请选择---",
    change: function (e) {
      onValueChanged(this.value());
    },
    dataSource: kendoDataSource.getKendoDataSource(dataSource)
  };

  return $(el).kendoDropDownList(kendoDropDownListOption);
}

function initWithDataObject({dataSource, el, onValueChanged}) {
  let kendoDropDownListOption = {
    dataTextField: dataSource.dataTextField,
    dataValueField: dataSource.dataValueField,
    optionLabel: "---请选择---",
    change: function (e) {
      onValueChanged(this.value());
    },
    dataSource: kendoDataSource.getKendoDataSource(dataSource)
  };

  return $(el).kendoDropDownList(kendoDropDownListOption);
}

function updateSelectedValue({el, value}){
  $(el).data("kendoDropDownList").value(value);
}

function updateDataSource({el, dataSource}){
  debugger;

  let ds = kendoDataSource.getKendoDataSource(dataSource);
  $(el).data("kendoDropDownList").setDataSource(ds)
}

export default {
  init,
  updateSelectedValue,
  updateDataSource
}
